<template>
  <div>
    <slot name="questionDetail">
      <div class="header" v-if="examListName[0].name === '多选题'">
        <div class="listName">{{ examListName[0].name }}</div>
        <p class="question">
          第&nbsp;{{ questionDetail[0].id }}&nbsp;题: &nbsp;&nbsp;{{
            questionDetail[0].questionName
          }}
        </p>
        <div class="checkStyle">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="复选框 A"
              >A.{{ questionDetail[0].answer.A }}</el-checkbox
            ><br />
            <el-checkbox label="复选框 B"
              >B.{{ questionDetail[0].answer.B }}</el-checkbox
            ><br />
            <el-checkbox label="复选框 C"
              >C.{{ questionDetail[0].answer.C }}</el-checkbox
            ><br />
            <el-checkbox label="复选框 D"
              >D.{{ questionDetail[0].answer.D }}</el-checkbox
            ><br />
          </el-checkbox-group>
        </div>
        <div class="middle">
          正确答案：{{}} <br />
          本题得分：{{}}
        </div>
        <br />
        <div class="footer">
          答案解析：<br />
          <p>{{}}</p>
        </div>
      </div>
    </slot>
    <slot name="questionDetail">
      <div class="header" v-if="examListName[0].name === '单选题'">
        <div class="listName">{{ examListName[0].name }}</div>
        <p class="question">
          第&nbsp;{{ questionDetail[0].id }}&nbsp;题: &nbsp;&nbsp;{{
            questionDetail[0].questionName
          }}
        </p>
        <div class="checkStyle">
          <el-radio v-model="radio" label="A"
            >A.{{ questionDetail[0].answer.A }}</el-radio
          ><br />
          <el-radio v-model="radio" label="B"
            >B.{{ questionDetail[0].answer.B }}</el-radio
          ><br />
          <el-radio v-model="radio" label="C"
            >C.{{ questionDetail[0].answer.C }}</el-radio
          ><br />
          <el-radio v-model="radio" label="D"
            >D.{{ questionDetail[0].answer.D }}</el-radio
          ><br />
        </div>
        <div class="middle">
          正确答案：B.{{ questionDetail[0].answer.B }} <br />
          本题得分：{{ questionDetail[0].answer.B }}
        </div>
        <br />
        <div class="footer">
          答案解析：<br />
          <p>{{ questionDetail[0].answer.B }}</p>
        </div>
      </div>
    </slot>
    <slot name="questionDetail">
      <div class="header" v-if="examListName[0].name === '判断题'">
        <div class="listName">{{ examListName[0].name }}</div>
        <p class="question">
          第&nbsp;{{ $route.query.id }}&nbsp;题: &nbsp;&nbsp;{{
            $route.params.question
          }}
        </p>
        <div class="checkStyle">
          <el-radio v-model="radio" label="A"
            >A.{{ questionDetail[0].answer.A }}</el-radio
          ><br />
          <el-radio v-model="radio" label="B"
            >B.{{ questionDetail[0].answer.B }}</el-radio
          ><br />
        </div>
        <div class="middle">
          正确答案：{{ questionDetail[0].answer.B }} <br />
          本题得分：{{ questionDetail[0].answer.B }}
        </div>
        <br />
        <div class="footer">
          答案解析：<br />
          <p>{{ questionDetail[0].answer.B }}</p>
        </div>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: "MyExamList",
  data() {
    return {
      radio: ['A','B','C','D'],
      checkList: ["复选框A"],
    };
  },
  props: {
    questionDetail: {
      type: Array,
      default: () => {},
    },
    examListName: {
      type: Array,
      default: () => {},
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.header{
  position: relative;
  left: 50px;
  top: 50px;
  .listName{
    font-size: 25px;
  }
  .question{
    margin-top: 20px;
    font-size: 18px;
  }
  .checkStyle{
    margin-top: 20px;
  }
  .middle{
    margin-top: 20px;
    font-size: 18px;
  }
  .footer{
    margin-top: 20px;
    font-size: 18px;
  }
}
</style>